<template>
	<view class="my">
		<view class="userbox">
			<view class="user">
				<view >
					<image :src="userInfo.avatarUrl" class="headpic"></image>
				</view>
				<view class="u_info"> 
					<text class="name">{{ userInfo.nickname }}</text><br />
					<view class="tags">
						<view class="tag">普通用户</view>
						<view class="tag upgrade">升级</view>
					</view>
				</view>
				<view class="setUp" @click="toPage('/pages/my/setUp/setUp')">
					<image src="../../static/svg/setup.svg" class="setUpIcon"></image>
				</view>
			</view>
			<view class="money">
				<div class="mbox" @click="toPage('/pages/my/cwRecord/cwRecord')">
					<strong><text>0.000</text></strong><br />
					<text class="tips">累计提现（元）</text>
				</div>
				<div class="mbox"  @click="toPage('/pages/my/cashWithdrawal/cashWithdrawal')">
					<strong><text>0.000</text></strong><br />
					<text class="tips">可提现（元）</text>
				</div>
			</view>
		</view>

		<view class="menuBox">
			<!-- <view class="menuItem" @click="toPage('/pages/my/myOrder/myOrder')">
				<image src="../../static/logo.png" class="icon"></image>
				<text>我的订单</text>
			</view> -->
			<view class="menuItem" @click="toPage('/pages/my/help/help')">
				<image src="../../static/logo.png" class="icon"></image>
				<text>帮助文档</text>
			</view>
			<view class="menuItem" @click="showUnderConstruction">
				<image src="../../static/logo.png" class="icon"></image>
				<text>在线客服</text>
			</view>
			<!-- <view class="menuItem" @click="toPage('/pages/my/about/about')">
				<image src="../../static/logo.png" class="icon"></image>
				<text>关于小程序</text>
			</view> -->
		</view>

		<view class="outLogin" @click="outLogin">退出登录</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				userInfo: {},
			}
		},
		onShow() {
			// 自动加载
			this.checkLogin();
		},
		onLoad() {
			
		},
		methods: {
			toPage(url) {
				uni.navigateTo({
					url
				})
			},
			showUnderConstruction() {
				uni.showToast({
				    title: '功能建设中',
					icon: 'error',//图标
					mask: false,
				    duration: 1000,
				});
			},
			checkLogin() {
				let userInfoJson = uni.getStorageSync("userInfo");
				if (!userInfoJson) {
					uni.showModal({
						title: '账号登录',
						content: '未登录账号, 是否去登录？',
						success(res) {
							console.log(res, '登录选择');
							if (res.confirm) {
								uni.navigateTo({
									url:'/pages/my/login'
								})
							} else {
								uni.showToast({
								    title: '即将跳转首页',
								    duration: 1000,
								    complete: function() {
								      // 1秒后执行跳转
								      setTimeout(function() {
								        // 使用uni.navigateTo跳转到登录页面
								        uni.switchTab({
								          url: '/pages/home/home'
								        });
								      }, 1000);
								    }
								});
							}
						}
					})
				} else {
					this.userInfo = JSON.parse(userInfoJson);
				}
			},
			outLogin() {
				uni.showModal({
					title: '退出提示',
					content: '是否确定退出？',
					success(res) {
						console.log(res, '退出选择');
						if (res.confirm) {
							uni.removeStorageSync("userInfo");
							setTimeout(() => {
								uni.switchTab({
									url:'/pages/home/home'
								})
							}, 1000); // 1000毫秒等于1秒
						}
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	@import '../../static/style/mixin.scss';

	.my {
		@include bg1;
		padding-top: 20upx;

		.userbox {
			width: 720upx;
			height: auto;
			margin: auto;
			border-radius: 10upx;
			background-color: #fff;
			padding-bottom: 30upx;

			.user {
				display: flex;

				.headpic {
					width: 180upx;
					height: 180upx;
					overflow: hidden; /* 隐藏超出部分 */
					border-radius: 50%; /* 圆形效果 */
					margin: 10upx 10upx 0 10upx;

					
					img {
						width: 95%;
						height: 95%;
					}
				}

				.u_info {
					width: 400upx;
					height: 200upx;
					@include vcc;
					align-items: flex-start;

					.name {
						font-size: 40upx;
					}

					.tags {
						display: flex;

						.tag {
							border: 1px solid #00ff00;
							padding: 5upx 10upx;
							font-size: 20upx;
							margin-right: 10upx;
							border-radius: 10upx;
						}

						.upgrade {
							border: 1px solid red;
						}
					}

				}

				.setUp {
					width: 200upx;
					height: 200upx;

					@include cc;

					.setUpIcon {
						width: 50upx;
						height: 50upx;
					}
				}
			}

			.money {
				display: flex;

				.mbox {
					width: 50%;
					text-align: center;
					font-size: 40upx;

					.tips {
						font-size: 25upx;
					}
				}
			}
		}

		.menuBox {
			width: 720upx;
			padding: 0 0 20upx 20upx;
			box-sizing: border-box;
			border-radius: 10upx;
			background-color: #fff;
			margin: 20upx auto;
			display: flex;
			justify-content: flex-start;
			flex-wrap: wrap;

			.menuItem {
				width: 330upx;
				height: 100upx;
				margin-right: 20upx;
				background-image: linear-gradient(90deg, aqua, #f89);
				border-radius: 10upx;
				margin-top: 20upx;
				@include cc;
				justify-content: flex-start;
				padding-left: 20upx;
				box-sizing: border-box;

				.icon {
					width: 60upx;
					height: 60upx;
					margin-right: 20upx;
				}
			}
		}

		.outLogin {
			width: 720upx;
			height: 100upx;
			@include cc;
			border-radius: 10upx;
			background-image: linear-gradient(90deg, aqua, #f89);
			margin: 20upx auto;
		}
	}
</style>
